Use modal dialogs for expense creation & edition (#10)

* First attemps at using route interception and modals

* Remove route interception

* Make it work

* Use Vaul on small screens

* Improve vaul

1 files changed, 28 insertions, 0 deletions

diff --git a/src/app/groups/[groupId]/expenses/actions.ts b/src/app/groups/[groupId]/expenses/actions.ts
new file mode 100644
index 0000000..31bb2e7
--- /dev/null
+++ b/src/app/groups/[groupId]/expenses/actions.ts
@@ -0,0 +1,28 @@
+'use server'
+import { createExpense, deleteExpense, updateExpense } from '@/lib/api'
+import { expenseFormSchema } from '@/lib/schemas'
+import { revalidatePath } from 'next/cache'
+
+export async function createExpenseAction(groupId: string, values: unknown) {
+  'use server'
+  const expenseFormValues = expenseFormSchema.parse(values)
+  await createExpense(expenseFormValues, groupId)
+  revalidatePath(`/groups/${groupId}`, 'layout')
+}
+
+export async function updateExpenseAction(
+  groupId: string,
+  expenseId: string,
+  values: unknown,
+) {
+  'use server'
+  const expenseFormValues = expenseFormSchema.parse(values)
+  await updateExpense(groupId, expenseId, expenseFormValues)
+  revalidatePath(`/groups/${groupId}`, 'layout')
+}
+
+export async function deleteExpenseAction(groupId: string, expenseId: string) {
+  'use server'
+  await deleteExpense(expenseId)
+  revalidatePath(`/groups/${groupId}`, 'layout')
+}